<template>
  <div class="walletManage" :class="walletList&&walletList.length==0?'noData':''">
    <div class="headerBox">
       <van-nav-bar
        title="钱包管理"
        :right-text="walletList.length==0?'':allCheck?'全选':'取消'"
        left-arrow
        @click-left="goBack"
        @click-right="onClickRight"
      ></van-nav-bar>
    </div>
    <div class="walletBox" v-if="walletList&&walletList.length>0">
      <div class="subWallet" v-for="(item,index) in walletList" :key="index">
        <div class="walletT">
          <div class="walletTL">
            <van-checkbox v-model="item.checked" :disabled="item.walletStatus">
              <template #icon="props">
                <img class="img-icon" src="@/assets/img/wallet/icon_xuan2@2x.png" v-if="props.checked" />
                <img class="img-icon" src="@/assets/img/wallet/icon_xuan1@2x.png" v-else />
              </template>
              <div>
                <p class="txt1">{{item.walletName}}</p>
                <p class="txt2">{{item.walletAddr}}</p>
              </div>
            </van-checkbox>
          </div>
          <div class="walletTR" @click="popupShowFunc(item)">
            导出私钥
          </div>
        </div>
        <div class="walletB flex">
          <div class="walletBL">
            默认钱包
          </div>
          <div class="walletBR">
            <van-switch v-model="item.walletStatus" :disabled="item.walletStatus" active-color="#00C8E7" inactive-color="#C8CEDA" size="24" @change="changeWalletStatus(item)" />
          </div>
        </div>
      </div>
    </div>
    <div class="noWallet" v-else>
      <img src="@/assets/img/wallet/img_qianbao@2x.png" alt="">
      <p>您还没有钱包哟</p>
    </div>
    <!-- <div class="handlerBox">
      <img src="@/assets/img/wallet/icon_shanchu @2x.png" alt="" class="delete" @click="deleteFunc">
      <div class="flex">
        <p class="handlerBtn handlerBtn1" @click="go('createWallet',1)">私钥导入钱包</p>
        <p class="handlerBtn handlerBtn2" @click="go('createWallet',2)">新增钱包地址</p>
      </div>
    </div> -->
    <van-overlay :show="popupShow" @click="closePopup">
      <div class="confirmBox" @click.stop>
        <p class="txt3">提示</p>
        <p class="txt4">导出钥匙钱包，需正确输入支付密码后方可进行查看。</p>
        <div class="payPass">
          <input type="password" v-model="payPwd" placeholder="请输入支付密码">
        </div>
        <div class="flex flex2">
          <p class="handlerBtn handlerBtn3" @click="exportFunc">确 认</p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {Encrypt,Decrypt} from '@/utils/AES.utils.js'
export default {
  data() {
    return {
      payPwd:'',
      walletList:[],
      popupShow:false,
      switchChecked:true,
      allCheck:true,
      selectExport:{}
    }
  },
  created(){
    // this.getUserWalletList()
    let userId=JSON.parse(localStorage.getItem('userInfor')).userId
    let walletInfo =JSON.parse(localStorage.getItem('wallet'))
    if ((localStorage.getItem('wallet')&&!walletInfo.hasOwnProperty(userId))||!localStorage.getItem('wallet')) {
      if(!localStorage.getItem('wallet')) {
        walletInfo={}
      }
      walletInfo[userId]={}
      localStorage.setItem('wallet',JSON.stringify(walletInfo))
    }
  },
  methods:{
    closePopup(){
      this.popupShow = false
      this.payPwd = ''
    },
    popupShowFunc(item){
      this.popupShow=true
      this.selectExport=item
    },
    async getUserWalletList(){
        let res = await this.$http.getUserWalletList();
        if (res) {
          this.walletList =res.data.map(x=>{
            x.checked = false
            return x
          })

          console.log(Decrypt(this.walletList[0].walletSecretKey))
        }
    },
    goBack(){
      this.$router.push({name:'walletIndex'})
    },
    go(name,type) {
      this.$router.push({name:name,query:{type:type||undefined}})
    },
    exportFunc(){
      if(!this.payPwd){
        this.$toast('请输入支付密码')
        return
      }
      let userId=JSON.parse(localStorage.getItem('userInfor')).userId
      let wallet= JSON.parse(localStorage.getItem('wallet'))[userId][this.selectExport.walletAddr]
      if(!wallet) {
        this.$toast('钱包数据丢失')
        return false
      }
      let payPwd = Decrypt(wallet.payPwd)
      console.log(payPwd)
      if(payPwd!=this.payPwd) {
        this.$toast('支付密码错误')
      } else {
        let info=encodeURIComponent(JSON.stringify(this.selectExport))
        this.$router.push({name:'exportKey',query:{info:info}})
      }
    },
    onClickRight(){
      this.allCheck = this.allCheck?false:true
      this.walletList =this.walletList.map(x=>{
        if (this.allCheck) {
          x.checked = false
        } else {
          if(!x.walletStatus){
            x.checked = true
          }
        }
        return x
      })
    },
    submit(){
     
    },
    async deleteFunc(){
      let deleteWallet=[]
      let names = this.walletList.filter(x=>{
        if(x.checked) {
          deleteWallet.push(x.walletAddr)
          return x
        }
      }).map(x=>x&&x.walletName).join(',')
      if(!names) {
        this.$toast('请选择要删除的钱包')
        return
      }
      this.$dialog.confirm({
        title: '提示',
        message: `你真的确定要删除${names}吗？`,
        theme: 'round-button',
        confirmButtonColor:'#00C8E7',
        cancelButtonColor:'#C8CEDA',
      })
      .then(async () => {
        let res = await this.$http.delUserWallet({walletName:names});
        if (res) {
          let userId=JSON.parse(localStorage.getItem('userInfor')).userId
          let wallet= JSON.parse(localStorage.getItem('wallet'))
          deleteWallet.map(x=>{
            delete wallet[userId][x]
          })
          localStorage.setItem('wallet',JSON.stringify(wallet))
          this.getUserWalletList()
          this.$toast('删除成功')
        }
      })
      .catch(() => {
      });
    },
    async changeWalletStatus(row){
      let res = await this.$http.updateUserWalletActive({walletName:row.walletName,walletStatus:row.walletStatus});
      if (res) {
        this.getUserWalletList()
      }
    },
    cancelOrderFunc(){
      this.$dialog.confirm({
        title: '提示',
        message: '确定是否删除钱包？',
        theme: 'round-button',
        confirmButtonColor:'#00C8E7',
        cancelButtonColor:'#C8CEDA',
      })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style scoped>
.walletBox{
  padding: 0.2rem 0.28rem;
  margin-bottom: 1.1rem;
}
.noData{
  height: 100vh;
  background: #FFF;
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 2rem;
}
.img-icon{
  width: 0.32rem;
  height: 0.32rem;
}
.subWallet{
  background: #fff;
  box-shadow: 0px 0.04rem 0.12rem 0px rgba(234,234,234,0.5);
  border-radius: 0.08rem;
  margin-bottom: 0.2rem;
}
.walletT{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.28rem;
  border-bottom: 1px solid #F5F3F3;
}
.txt1{
  font-size: 0.3rem;
  color: #2F3E3E;
}
.txt2{
  width: 3rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 0.26rem;
  margin-top: 0.04rem;
}
.walletTR{
  font-size: 0.24rem;
  color: #666;
}
.walletTR::after{
  display: inline-block;
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  background: url('../../assets/img/goods/icon_fanhui1@2x.png') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
  opacity: 0.5;
  vertical-align: bottom;
}
.walletB{
  padding: 0.3rem 0.28rem;
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.28rem;
  z-index: 1;
  border-top: 2px solid #F1F1F1;
}
.handlerBtn{
  height: 0.88rem;
  line-height: 0.88rem;
  border-radius: 0.44rem;
  text-align: center;
  color: #fff;
  font-size:0.32rem;
}
.handlerBtn1{
  width: 2.74rem;
  background: #00C8E7;
  margin-right: 0.2rem;
}
.handlerBtn2{
  width: 2.74rem;
  background: #F6741F;
}
.delete{
  width: 0.6rem;
  height: 0.6rem;
  padding-left: 0.2rem;
  box-sizing: content-box;
}
.confirmBox{
  position: relative;
  width: 6.54rem;
  height: 5.54rem;
  border-radius: 0.12rem;
  background: #fff;
  padding: 0 0.42rem;
  left: 50%;
  top: 50%;
  margin-left: -3.27rem;
  margin-top: -2.77rem;
}
.txt3 {
  text-align: center;
  padding-top: 0.6rem;
  font-size: 0.4rem;
  margin-bottom: 0.16rem;
  color: #000;
}

.txt4 {
  font-size: 0.3rem;
  color: #000;
  margin-bottom: 0.48rem;
}
.handlerBtn3{
  width: 2.7rem;
  background: #F6741F;
}
.flex2{
  justify-content: center;
}
.payPass{
  margin-bottom: 0.4rem;
}
.payPass input{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  padding: 0.32rem;
  border: none;
  outline: none;
  background: #F5F5F5;
}
</style>
